@import '../../../assets/styles/mixin.styl'
.bg
  .fixed-top
    position fixed
    left 0
    top: 0
    width: 100%
    height: 56px
    background-color #fff
    box-sizing: border-box
    padding: 0 10px
    fj(space-between)
    align-items center
    sc(24px, #333)
    &.active
      box-shadow: 0 5px 10px #ededed
    text
      width: 14.285%
      fj(center)
      align-items: center
    .active
      color: #FF5358
  .fixed-height-pannel
    height: 56px
  .date-content
    box-sizing: border-box
    width: 100%
    padding: 0 10px 0
    .month-pannel
      .title
        height: 70px
        fj(center)
        align-items: center
        background-color: #f7f7f7
        sc(30px, #333)
      .date-list
        display flex
        flex-direction: row
        flex-wrap: wrap
        .date-item
          width: 14.285%
          height: 116px
          fj(center)
          flex-direction: column
          align-items: center
          text
            text-align: center
            font-size: 24px
            line-height: 1
            height 24px
            margin: 5px 0
            &.date
              font-weight: 600
            &.desc
              font-size: 20px
              padding-top: 5px
            &.sub
              sc(20px, #ccc)
          &.week
            color: #FF5358
          &.disable
            color: #9b9b9b
          &.active
            background-color: $color-theme
            color: #fff
            border-radius: 8px
            .sub
              color: #fff
          &.active-gard
            background-color: #ccc
            color: #fff
            border-radius: 8px
            transition: background 0.3s
            .desc
              color: #eee
